﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>矫正人员季度报表</title>
<head>
<script type="text/javascript" src="/static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/static/echarts/dist/echarts.js"></script>
<script type="text/javascript" src="/static/echarts/theme/dark.js"></script>
<script src="/static/js/echarts.common.min.js"></script>
</head>
<style type="">
	div{
		margin: 0 auto;
	}
</style>
</head>
<body>
	
	<table width="100%" border="0" align="center" cellpadding="0"
		cellspacing="0">
		<tr>
			<td width="1%" align="left"	background="/images/b2.jpg">
				<img src="/images/b1.jpg" width="10" height="26" />
			</td>
			<td width="68%" background="/images/b2.jpg">
				<table width="160" border="0" align="left" cellpadding="0" cellspacing="0">
					<tr>
						<td width="20" align="left">
							<img src="/images/tz.gif" width="10" height="16" />
						</td>
						<td width="110" align="left" class="biao">矫正人员季度报表</td>
					</tr>
				</table>
			</td>
			<td width="31%" align="right" background="/images/b2.jpg">
				<img src="/images/b3.jpg" width="9" height="26" />
			</td>
		</tr>
	</table>
	<div style="height:40px;width:1200px"></div>
	<div id="echart" style="height:700px;width:1200px"></div>
	<div><center>矫正人员季度报表-柱状图<br />(开展试点,矫正人员,成功矫正)</center></div>
	

<script type="text/javascript">
$(function(){
	//获得后台数据
	var category;//类别
	var pilot;//试点开展
	var socialWorkers;//社会工作人员
	var governmentWorkers;//政府工作人员
	var successfulCorrection; //成功矫正人员数量
	var name;
	$.ajax({
		url:'/echarts/viewEcharts',
		async:false,
		dataType: "json",
		cache: false,
		success: function(data){
			category=data.category;
			pilot=data.pilot;
			socialWorkers=data.socialWorkers;
			governmentWorkers=data.governmentWorkers;
			successfulCorrection=data.successfulCorrection;
			name=data.name;
			//alert(data.pilot);
			//alert(data.socialWorkers);
			
		}
	})
		
    // 路径配置
    require.config({
        paths: {
            echarts: '/static/echarts/dist'
        }
    });    
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
			'echarts/chart/line',
			'echarts/chart/chord'
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('echart'),"dark"); 
            
            var option = {
            	title:{  //标题
            		show:true,
            		left:'right'
            	},
            		
                tooltip: {  //提示框，鼠标悬浮交互时的信息提示
                    show: true
                },
				
				toolbox:{//定义工具按钮
					show : true,
					feature : {
						dataView : {show: true, readOnly: false},//数据信息按钮
						saveAsImage:{show:true},  //是否保存为图片
						restore:{show:true}, //还原
						magicType : {show: true, //显示折线、柱状图等切换按钮
							type: ['line', 'bar','stack', 'tiled']}
					}
				},
                legend: {//图例
                    data:name
                },
                xAxis : [//x轴设置
                    {
                        type : 'category',//x轴显示类别
                        data : category//
                    }
                ],
                yAxis : [//y轴设置
                    {
                        type : 'value'///y轴显示数据值
                    }
                ],
                series : [
                    {
                        "name":name[0],
                        "type":"bar",
                        "data":pilot
                    },
					 {
                        "name":name[1],
                        "type":"bar",
                        "data":socialWorkers
                    },
					 {
                        "name":name[2],
                        "type":"bar",
                        "data":governmentWorkers
                    },
                    {
                        "name":name[3],
                        "type":"bar",
                        "data":successfulCorrection
                    }
                ]
            };
    
            // 为echarts对象加载数据 
            myChart.setOption(option); 
        }
    );
}); 

</script>
</body>
</html>